<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">

		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			
		</style>
	</head>

	<body>
		
		
		
	<div class="mui-content mui-scroll-wrapper" id="pullrefresh">
			<div class="mui-scroll">
				<!--
				<ul class="mui-table-view  mui-table-view-chevron" id="menulist">
					
					<li class="mui-table-view-cell mui-media" v-for="prd in rsPrds" :style="$index%2==1?'background-color:#eeeeee':'background-color:#ccffff'">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="{{prd.FilePath}}" width="80px" height="80px">
							<div class="mui-media-body">
								<input type="checkbox"/>{{prd.goods_name}}
								<p class='mui-ellipsis'>¥{{prd.mprice}}</p>
							</div>
							
						</a>
					</li>
					
				</ul>
				-->
				<!--
				<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"  id="menulist">
			        <li class="mui-table-view-cell"v-for="prd in rsPrds" >
			            <div class="mui-table">
			                <div class="mui-table-cell mui-col-xs-10">
			                    <h4 class="mui-ellipsis">{{prd.goods_name}}</h4>
			                    <h5>价格：¥{{prd.mprice}}</h5>
			                    <p class="mui-h6 mui-ellipsis">分类:{{prd.item_name}}</p>
			                </div>
			                <div class="mui-table-cell mui-col-xs-2 mui-text-right">
			                    <span class="mui-h5"><input type="checkbox"/></span>
			                    <img class="mui-media-object mui-pull-left" :src="prd.FilePath" :value="prd.goodid" v-model="prd.checked" width="80px" height="80px">
			                </div>
			            </div>
			        </li>
		        </ul>
		       -->
		       
		       <ul id="menulist" class="mui-table-view">
					<li class="mui-table-view-cell" v-for="prd in rsPrds">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red" delPrdId="{{prd.id}}">删除</a>
						</div>
						<div class="mui-slider-handle"  editPrdId="{{prd.id}}">
							<h4 class="mui-ellipsis">{{prd.goods_name}}</h4>
							<img class="mui-media-object mui-pull-left" :src="prd.FilePath" width="80px" height="80px">
			                <h5>价格：¥{{prd.mprice}}</h5>
			                <p class="mui-h6 mui-ellipsis">分类:{{prd.item_name}}</p>
						</div>
					 </li>
				</ul>
			</div>

	</div>

	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/tools.js"></script>
		
		
		<script>
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down:
				{
					callback: pulldownRefresh
				},
				up: 
				{
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		
		function pulldownRefresh() 
		{//alert("puul");
			setTimeout(function() 
			{
				theVue.refresh();
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				mui('#pullrefresh').pullRefresh().refresh(true);
			}, 1000);
		}
		
		function pullupRefresh() 
		{
			setTimeout(function() 
			{
				//alert(theVue.iCurPageNo+"-"+theVue.m_iPageCount);
				mui('#pullrefresh').pullRefresh().endPullupToRefresh((theVue.iCurPageNo >= theVue.m_iPageCount)); //参数为true代表没有更多数据了。
				if(theVue.iCurPageNo <= theVue.m_iPageCount)
				{
					theVue.loadOrders();
				}
			}, 1500);
		}
		
		mui('#menulist').on('tap', '.mui-btn', function()
		{
			//alert(this.getAttribute("delPrdId"));
			theVue.delRow(this.getAttribute("delPrdId"));
		});
		
		mui('#menulist').on('tap', '.mui-slider-handle', function()
		{
			//alert(this.getAttribute("editPrdId"));
			theVue.editRow(this.getAttribute("editPrdId"));
		});
		
		
		</script>
		
		<script>
	var m_strOrderStatus = "";
	var g_iConstPageSize = 8;
	var theVue = new Vue(
	{
	  el: '#menulist',
	  created:function()
	  {
	  	this.loadOrders();
	  },
	  data: {
	  	iCurPageNo:1,
	  	m_iPageCount:1,
	    rsPrds:[]
	  },
	  methods:
	  {
	  	  editRow:function(p_strGoodsId)
	  	  {
	  	  		//alert(p_strGoodsId);
	  	  	  g_jsonData.putData("opMode","edit");
	  	  	  g_jsonData.putData("editGoodId",p_strGoodsId);
	  	  	  mui.openWindow({
				    url: "newmenu.html", 
				    id:"newmenu.html"
				  });

	  	  },
	  	  delRow:function(p_strGoodsId)
	  	  {
	  	  	  mui.confirm('确认删除？', "准点猫", ["取消","确定"], function(e) 
	  	  	  {
					if (e.index == 1) 
					{
						sespost('/zdm/AppApi/GoodsFactory/DelGoods',
						{GoodsIds:p_strGoodsId},
						function(data)
						{
							if(data.succ==1)
							{
							  	var i=0;
							  	for(i=0;i<theVue.rsPrds.length;i++)
							  	{
								  	if(theVue.rsPrds[i].id == p_strGoodsId)
								  	{
									  	theVue.rsPrds.splice(i,1);
								  	}
							  	}
							  	mui.toast("删除成功");
						  	}
							else
							{
								mui.toast("删除失败");
							}
						});
					}
				});
	  	  	  
	  	  },
	  	  refresh:function()
	  	  {
	  	  		this.rsPrds.splice(0,this.rsPrds.length);
	  	  		//m_strOrderStatus = p_strStat;
	  	  		this.iCurPageNo = 1;
	  	  		this.m_iPageCount=1,
	  	  		this.loadOrders();
	  	  },
		  loadOrders:function()
		  {
			  var jData = {
					curPage:this.iCurPageNo,
					pageSize:g_iConstPageSize,
					qryName:"",
					userid:'root'
				};
	
				var thePrds = this;
				
				sespost('/zdm/AppApi/GoodsFactory/GoodList',
				jData,
				function(data)
				{
					//alert(data.RecCount);
					if(data.RecCount%g_iConstPageSize==0) 
					{
						thePrds.m_iPageCount = data.RecCount/g_iConstPageSize;
					}
					else
					{
						thePrds.m_iPageCount = parseInt(data.RecCount/g_iConstPageSize)+1;
					}
					//alert(thePrds.m_iPageCount);
					
					for(var i=0;i<data.Recs.length;i++)
					{
						thePrds.rsPrds.push(data.Recs[i]);
					}
					thePrds.iCurPageNo++;
					
				},'json');

		  }
	  }
	});

	</script>
	<script>
		mui.init({
			swipeBack:true
		});
		
		
	</script>
	
  
</html>